// 首页
<template>
  <div class="u_index">
    <div class="u_search">
      <!-- 搜索企业信息 -->
    <div style="width:500px; margin:20px auto;">
      <el-input placeholder="请输入职位或公司名称" v-model="str" class="input-with-select" clearable>
        <el-button slot="append" icon="el-icon-search" @click="getJobByStr">搜索</el-button>
      </el-input>
    </div>
      <!-- <div class="search">
        <el-input
          class="search_input"
          v-model="str"
          placeholder="请输入职位或公司名称"
        ></el-input>
        <el-button class="search_button" @click="getJobByStr" type="primary">search</el-button>
      </div> -->
    </div>
    <div class="zhiwei">
      <div class="zhiwei_head">为你推荐</div>
      <div class="zhiwei_content">

        <el-card class="box-card card-boder" v-for="i in jobList" :key="i.id" shadow="hover">
          <div slot="header" class="clearfix">
            <span>{{i.job}}</span>
            <el-button style="float: right; padding: 3px 0" type="text"  @click="look(i.id)">查看详情</el-button>
          </div>
          <div class="text item">
            薪资￥：{{i.sallow}}-{{i.salhi}}/月
          </div>
          <div class="text item">
            入职要求：{{ i.experience }}
          </div>
          <div class="text item">
            工作内容：{{ i.description }}
          </div>
          <div class="comName">
            {{i.comName}}
          </div>
        </el-card>

        <el-dialog title="投一波" :data="jodInfo" :visible.sync="dialogVisible" class="touyibo">
          <span>入职要求：{{jodInfo.experience}}</span><br><br>
          <span>工作内容：{{ jodInfo.description }}</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">不感兴趣</el-button>
            <el-button type="primary" @click="tuo(jid)">我要投它</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style>
.u_index {
  width: 100%;
  /* height: 100vh; */
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  				overflow-x: hidden;
				overflow-y: hidden; 
}
.u_search {
  width: 100vw;
  height: 111px;
  /* position: absolute; */
  background-color: #f2f5f4;
  /* border: 1px solid #cccc; */
}
.search {
  width: 800px;
  height: 50px;
  margin: 30px calc(50vw - 400px);
  border: 1px solid #409eff;
  border-radius: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search_input {
  width: 675px;
  margin-left: 15px;
  border-radius: 25px;
}
.search_button {
  width: 110px;
  height: 50px;
  font-size: 20px;
  border-radius: 0 25px 25px 0;
}
.zhiwei {
  width: 1200px;
  margin: 0px calc(50vw - 600px);
  
}
.zhiwei_head {
  width: 1200px;
  height: 35px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
  line-height: 35px;
  vertical-align: center;
  cursor: pointer;
}
.zhiwei_content {
  width: 1200px;
  /* height: 645px; */
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: flex-start;
}
.zhiwei_item {
  width: 378px;
  height: 200px;
  margin-top: 15px;
  margin-left: 15px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.zhiwei_item:hover {
  box-shadow: 1px slategrey;
}
.card-boder{
  border: 1px solid #ccc;
}
.comName{
  border-top: 0.5px dashed #999;

}
.el-dialog {
  width: 400px;
  height: 500px;
}

  .text {
    font-size: 14px;
  }

  .item {
    height: 30px;
    overflow: hidden;
/*内容超出后隐藏*/
text-overflow: ellipsis;
/* 超出内容显示为省略号*/
white-space: nowrap;
/*文本不进行换行*/
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 378px;
    height: 200px;
    margin: 10px 10px;
  }
  .touyibo{
    height: auto !important;
  }
</style>
<script>
export default {
  data() {
    return {
      str: "",
      dialogVisible: false,
      sal: "null",
      job: "null",
      sal1: "null",
      job1: "null",
      address:"null",
      jobList: [],
      jodInfo:{},
      jid:null,
    };
  },
  methods: {
    //搜索
    getJobByStr(){
      console.log(this.str);
      var url = this.$store.state.ip + "/job/getJobByStr";
      // 参数
      let str = this.str;
      let param = new URLSearchParams();
      param.append("str", str);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data)
        this.jobList = res.data;
      })
    },
    // 获取用户职位信息
    getJobByUser() {
      var id = this.$store.state.userId;
      console.log("获取userId:", id);
      var url = this.$store.state.ip + "/user/getUserInfo";
      // 参数
      let param = new URLSearchParams();
      param.append("id", id);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        if (res.data.work == null || res.data.sal == null) {
          this.$router.push("/u/wode");
        }
        console.log(res.data)
        this.job = res.data.work;
        this.sal = res.data.sal;
        this.job1 = res.data.work1;
        this.sal1 = res.data.sal1;
        this.address = res.data.city;
        console.log(this.job, this.sal);
        var url = this.$store.state.ip + "/job/getJobByUser";
        // 参数
        let param = new URLSearchParams();
        param.append("sal", this.sal);
        param.append("job", this.job);
        param.append("sal1", this.sal1);
        param.append("job1", this.job1);
        param.append("address", this.address);
        this.$axios({
          method: "post",
          url: url,
          data: param,
        }).then((ss) => {
          this.jobList = ss.data;
          console.log(this.jobList);
        });
      });
    },
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    // 点击详情
    look(jid){
      this.jid = jid;
      this.dialogVisible = true;
      var url = this.$store.state.ip + "/job/getJobInfo";
      // 参数
      let param = new URLSearchParams();
      param.append("id", jid);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        this.jodInfo = res.data;
      })
    },
    // 投简历
    tuo(jid){
      this.dialogVisible = false;
      console.log("获取jid:",jid);
      var uid = this.$store.state.userId;
      var url = this.$store.state.ip + "/userRe/addUserRe";
      // 参数
      let param = new URLSearchParams();
      param.append("jid", jid);
      param.append("uid", uid);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        if (res.data == 1) {
          this.$message({
          message: '恭喜你，投递成功！',
          type: 'success'
        });
        }
      })
    },
  },
  beforeMount() {
    this.getJobByUser();
  },
};
</script>